iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

1995到2021,php到react網站開發歷程系列 第 26

DAY26-在firebase上架你的react網站吧

  • 分享至 

  • xImage
  •  

https://firebase.google.com/codelabs/firebase-emulator/img/c6a7aeb91fe97a64.gif?hl=da

前言:

今天是第26天啦,阿森在整個開發的部分也差不多完成了,準備進入最後上架測試階段!

在上架的部分阿森選擇使用firebase來當host,因為使用起來真的滿方便的,免費的額度也很高,拿來測試幾乎不用付到什麼錢。正式上架的計費阿森也覺得滿ok的,所以在這裡推薦給大家!

費用部分:

關於詳細的計費方式可以直接到官方網站:

https://firebase.google.com/pricing

幾個重點大概是免費版的spark專案一個月可以提供:

1G的儲存空間

10G的下載量

20k寫

50k讀

20k刪

而付費版的Blaze專案一個月計費是:

0.18usd/GB的儲存計費

0.026usd/GB的下載計費

跟我們的需求換算下來其實很划算。

怎麼deploy:

再來就說到怎麼上架你的網站了,首先我們先到firebase:

https://firebase.google.com

可以直接用google帳戶登入。

然後新增一個專案:

截圖 2021-10-08 下午8.54.51.png

再來我們打開終端機,輸入這串:

npm i -g firebase-tools

接著輸入:

firebase login

應該會跳出Firebase CLI要求登入的頁面,這裡當然是用你的google帳號登入。

然後我們到專案的終端機輸入:

firebase init

像這樣:

截圖 2021-10-08 下午8.52.23.png

再來會依序問幾個set up和deploy的問題:

? Please select an option:

Use an existing project

? Select a default Firebase project for this directory:

這裡選你剛剛新增的firebase專案

i  Using project 你的firebase專案

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that

will contain Hosting assets to be uploaded with firebase deploy. If you

have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory?

build

? Configure as a single-page app (rewrite all urls to /index.html)?

Yes

? Set up automatic builds and deploys with GitHub?

No

? File public/index.html already exists. Overwrite?

No

i  Skipping write of public/index.html

i  Writing configuration info to firebase.json...

i  Writing project information to .firebaserc...

  Firebase initialization complete!

都完成之後就表示他已經成功連上你的firebase了。

然後我們要使用這串:

npm run build

截圖 2021-10-08 下午8.57.52.png

跑完一大堆東西後會出現:

截圖 2021-10-08 下午8.58.27.png

這時候我們輸入最後一串指令:

firebase deploy

截圖 2021-10-08 下午8.59.19.png

看到complete就成功了喔!

https://dnms-93f6b.web.app

可以到他預設的url預覽自己的網站,也可以傳給其他人一起測試,這樣比起前面的ngrok會快許多,也更符合之後上架的狀態。

小結:

今天介紹了如何在firebase上架react網站,希望這個好用的工具能幫到各位!

那就先這樣,我們明天見!


上一篇
DAY25-問答頁面設計
下一篇
DAY27-Firebase Domain設定
系列文
1995到2021,php到react網站開發歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言